<template>
  <div class="ask1-main">
        <img class="ask1-bg" :src="src">
        <div class="ask1-title">
            <p class="title-subtitle">{{subtitle}}</p>
            <p class="title-title">{{title}}</p>
            <button>{{button}}</button>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      src: require('@/assets/images/Main/Ask1/bg.jpg'),
      subtitle: '-穿搭疑惑-',
      title: '为什么有艺术感的人冬天都要穿黑?',
      button: '点击解惑'
    }
  }
}
</script>

<style lang='scss'>
    .ask1-main {
        position: relative;
        img {
            width: 100%;
            height: auto;
            position: relative;
            -webkit-filter: brightness(50%);
        }
        .ask1-title {
            // background-image: 'url(' + src + ')';
            position: absolute;
            left: 0;
            top: 1ch;
            width: 100%;
            text-align: center;
            font-family: 微软雅黑;
            color: white;
            letter-spacing: 3px;
            padding-top: 10px;
            .title-subtitle {
                font-weight: bold;
                font-size: 14px;
                margin-bottom: -5px;
            }
            .title-title {
                text-align: left;
                width: 80%;
                margin-left: 10%;
                font-weight: bolder;
                font-size: 18px;
            }
        }
        button {
            position: relative;
            display: block;
            width: 180px;
            // bottom: 5;
            margin: -7px auto;
            padding: 10px 15px;
            border: 2px solid #fff;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            letter-spacing: .08em;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }
    }
</style>
